<template>
  <header class="header header-bg-gradient overflow-hidden">
    <div class="container position-relative">
      <div class="bubble-bg-animation">
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-2.png')"
            alt="bubble"
          />
        </div>
      </div>
      <div class="header-bg-inner">
        <div class="header-carousel swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="row align-items-center">
                <div class="col-lg-5 pb-30">
                  <div class="header-content text-center text-lg-start">
                    <h1>New Arrival On Spring 2021</h1>
                    <p>
                      This is one of the best and latest collection on to global
                      &amp; international market. Try to buy.
                    </p>
                    <a
                      href="shop-details.html"
                      class="btn main-btn main-btn-radius"
                      >Buy Now</a
                    >
                  </div>
                </div>
                <div class="offset-lg-1 col-lg-6 pb-30">
                  <div class="header-content-image">
                    <img
                      :src="require('assets/images/products/product-12.png')"
                      alt="product"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="row align-items-center">
                <div class="col-lg-5 pb-30">
                  <div class="header-content text-center text-lg-start">
                    <h1>Latest Offer For Spring 2021</h1>
                    <p>
                      This is one of the best and latest collection on to global
                      &amp; international market. Try to buy.
                    </p>
                    <a
                      href="shop-details.html"
                      class="btn main-btn main-btn-radius"
                      >Buy Now</a
                    >
                  </div>
                </div>
                <div class="offset-lg-1 col-lg-6 pb-30">
                  <div class="header-content-image">
                    <img
                      :src="require('assets/images/products/product-12.png')"
                      alt="product"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-navigation">
            <button type="button" class="swiper-button-prev">
              <i class="flaticon-back"></i>
            </button>
            <button type="button" class="swiper-button-next">
              <i class="flaticon-next"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const refData = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  var headerCarousel = new Swiper(".header-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});

const methods = {};
</script>
<script>
$(document).ready(function () {});
</script>
<style lang="scss" scoped>
.header-carousel {
  position: static;

  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #4f5ac2;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;

    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: -20px;
  }
  .swiper-navigation button.swiper-button-next {
    right: -20px;
  }
}
</style>
